<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>medium editor | demo multi paragraph</title>
    <link rel="stylesheet" href="css/demo.css">
    <link rel="stylesheet" href="../dist/css/medium-editor.css">
    <link rel="stylesheet" href="../dist/css/themes/default.css">
</head>
<body>
    <a href="https://github.com/yabwe/medium-editor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
    <div id="container">
        <h1>Medium Editor Demo</h1>
        <div class="editable" data-placeholder="Type some text" spellcheck="false">
        <p><b>In this demo the toolbar will not appear if you select several paragraphs or block quotes.</b></p>
        <p><h2>First Paragraph</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices ullamcorper nibh, ut imperdiet arcu rutrum et. Vestibulum vitae orci metus. Praesent dapibus interdum purus, vitae mattis urna pharetra a. Praesent sodales volutpat mi et rhoncus. Phasellus quis tortor nulla. Pellentesque dapibus lorem et eros lobortis, et iaculis est accumsan. Nunc et ligula laoreet, egestas est id, placerat dolor. Praesent sed gravida tortor, non elementum enim. Integer et nulla sit amet orci suscipit sagittis pellentesque a est. Maecenas vitae purus odio. Aenean tincidunt varius arcu a vehicula. Quisque vestibulum venenatis vestibulum. Nullam pellentesque purus non dui adipiscing tempus.</p>

        <p><h2>Second Paragraph </h2>Pellentesque sit amet turpis a felis ornare euismod id vitae ante. Vivamus nec orci interdum, blandit dui id, gravida orci. Aliquam malesuada tristique imperdiet. Mauris lobortis, mi vel dictum feugiat, sem nibh hendrerit mi, eu pellentesque mauris quam et lorem. Integer ante ligula, placerat id pharetra ut, lacinia sit amet ante. Donec luctus, orci eu vestibulum suscipit, nisl lorem dignissim mauris, et auctor dolor odio nec mauris. Maecenas velit justo, lobortis a accumsan et, adipiscing sit amet leo. Vestibulum pharetra nisi erat, vitae dictum eros vestibulum eget. Ut aliquet lorem eu dui auctor aliquam. Nunc mollis elementum justo non ultricies. Nam dictum egestas augue sit amet ullamcorper. Praesent laoreet lectus ut velit porta varius. Vestibulum eget gravida sapien. Mauris viverra, metus vel varius posuere, augue metus aliquam sem, in pellentesque ipsum mauris non enim.</p>

        <blockquote>This is a block quote. Suspendisse potenti. Vestibulum semper felis vitae sapien ultricies venenatis. Aliquam mollis dui dolor, in auctor urna iaculis dapibus. Nam condimentum mollis sapien, non bibendum lacus feugiat eu. Phasellus feugiat erat ut varius tincidunt. Quisque suscipit ornare lacus, nec dapibus lacus vulputate at. Morbi at ipsum sollicitudin, suscipit elit sed, ultrices ligula. Suspendisse tincidunt libero iaculis velit iaculis, ac congue enim euismod. Nam molestie ligula at mattis tincidunt. Praesent porttitor nisi lectus, nec suscipit lectus porttitor nec.</blockquote>

        <p>Another paragrph. Suspendisse potenti. Vestibulum semper felis vitae sapien ultricies venenatis. Aliquam mollis dui dolor, in auctor urna iaculis dapibus. Nam condimentum mollis sapien, non bibendum lacus feugiat eu. Phasellus feugiat erat ut varius tincidunt. Quisque suscipit ornare lacus, nec dapibus lacus vulputate at. Morbi at ipsum sollicitudin, suscipit elit sed, ultrices ligula. Suspendisse tincidunt libero iaculis velit iaculis, ac congue enim euismod. Nam molestie ligula at mattis tincidunt. Praesent porttitor nisi lectus, nec suscipit lectus porttitor nec.</p>
        </div>


    </div>
    <script src="../dist/js/medium-editor.js"></script>
    <script>
        var editor = new MediumEditor('.editable', {
            delay: 0,
            toolbar: {
                diffTop: -12,
                allowMultiParagraphSelection: false
            },
            anchor: {
                placeholderText: 'Type a link'
            }
        });

    </script>
</body>
</html>
